<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>vue事件修饰符</title>
   <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
   <style>
      * {
         margin-top: 20px;
      }

      .demo1 {
         height: 50px;
         background-color: red;
      }

   </style>
</head>

<body>
   <div id="root">
      <a href="https://www.baidu.com" @click.prevent='e1'>prevent
         default event</a>
      <div class='demo1' @click='e1'>
         <button @click.stop='e1'>阻止事件冒泡</button>
      </div>
      <!-- 其他：
      .once 只触发一次
      .capture 使用捕获模式
      .self 只有target是当前操作的元素时才触发事件
      .passive 事件的默认行为立即触发不需要等事件回调执行完成 -->
      <!-- tip:滚动事件：wheel是滚轮滚动，scoll是滚动条滚动 -->
      <div class='demo1' @click.self='e1'>
         <button @click='e1'>只有target是当前操作的元素时才触发事件</button>
      </div>
   </div>
   <script>
      Vue.config.productionTip = false
      const vm = new Vue({
         el: '#root',
         data: {
            name: 'chen',
            id: '3200541011'
         },
         methods: {
            e1(a) {
               console.log(a.target);
            },
         }
      })
   </script>
</body>

</html>
